<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>修改基本资料</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/static/wx/css/mui.min.css"/>
    <style>
        body,.mui-content{
            background-color: white;
        }
        .greydiv{
            height: 15px;
            background-color: #F4F4F4;
        }

        label{
            margin-top: 1px;
            font-size: 14px;
            color: #6B6B6B;
        }

        .c6b{
            color: #6B6B6B;
        }

        .red{
            color: red;
        }

        input{
            font-size: 14px;
            color: #333333;
        }

        .myradio{
            margin-right: 18px;
            display: inline-block;
            width: 60px;
            height: 24px;
            line-height: 24px;
            border: 1px solid #BCBCBC;
            text-align: center;
            font-size: 13px;
            border-radius: 5px;
            margin-top: 8px;
        }

        .myradio.active{
            border-color: #1AB394;
            background-image: url(/static/wx/img/select.svg);
            background-repeat: no-repeat;
            background-size: 15px 15px;
            background-position: 44px 8px;
        }

        #sendcode{
            position: absolute;
            right: 0;
            font-size: 12px;
            background-color: #1AB394;
            color: white;
            width: 72px;
            border-radius: 3px;
            text-align: center;
            height: 25px;
            line-height: 25px;
            top: 8px;
            right: 22px;
        }

        #btnarea{
            margin-left: 18px;
            margin-right: 18px;
        }

        #sm{
            margin-top: 39px;
            padding-top: 8px;
            padding-bottom: 8px;
            font-size: 13px;
            background-color: #419EFF;
            border-color: #419EFF;
        }
    </style>
</head>
<body>
<div class="greydiv"></div>
<form class="mui-input-group">
    <div class="mui-input-row">
        <label><span class="red">*</span>姓名</label>
        <input type="text" class="mui-input-clear" placeholder="" value="周星星">
    </div>
    <div class="mui-input-row">
        <label><span class="red">*</span>性别</label>
        <span class="myradio active">男</span><span class="myradio">女</span>
    </div>
    <div class="mui-input-row">
        <label><span class="red">*</span>生日</label>
        <input type="date" class="mui-input-clear" placeholder="" value="2017年4月29日">
    </div>
    <div class="mui-input-row">
        <label><span class="red">*</span>电话</label>
        <input type="text" class="mui-input-clear" placeholder="" value="15889898989">
    </div>
    <div class="mui-input-row">
        <label>验证手机</label>
        <input type="text" class="mui-input-clear c6b" placeholder="" value="15889898989" disabled="disabled" readonly="readonly">
        <div id="sendcode">发送验证码</div>
    </div>
    <div class="mui-input-row">
        <label><span class="red">*</span>验证码</label>
        <input type="number" class="mui-input-clear" placeholder="">
    </div>
</form>
<div id="btnarea"><button class="mui-btn mui-btn-block mui-btn-blue" id="sm">提交</button></div>

<script src="/static/wx/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
    mui.init();
    document.getElementById("sm").addEventListener("tap",function () {
        alert(1);
        wx.closeWindow();
    })
</script>
</body>
</html>
